<template>
    <div class="cpt-page">
        <div class="cpt-page-header cpt-page-header-flex">
            <div class="flex-left">
                <el-button type="primary" @click="doSub">确认</el-button>
            </div>
            <div class="flex-right">
                <el-input v-model="query.code" class="search-input-class border" placeholder="角色编码" />
                <el-input v-model="query.name" class="search-input-class border" placeholder="角色名称" />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="cpt-content">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                height="350"
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="code" label="角色编码" />
                <el-table-column prop="name" label="角色名称" />
            </el-table>
        </div>
        <div class="cpt-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'

export default {
    props: {
        single: {
            type: Boolean,
            default: true
        }
    },
    emits: ['select'],
    setup(props, ctx) {
        const datagrid = ref(null)

        const state = reactive({
            query: {
                code: '',
                name: ''
            },
            table: {
                data: [],
                selected: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            }
        })

        const handleSelectionChange = (val) => {
            state.table.selected = val
        }

        const handleSizeChange = (val) => {
            state.table.pagination.pageSize = val
            loadData()
        }

        const handleCurrentChange = (val) => {
            state.table.pagination.currentPage = val
            loadData()
        }

        const handleClickTableRow = (row) => {
            if (props.single) {
                datagrid.value.clearSelection()
            }
            datagrid.value.toggleRowSelection(row)
        }

        const loadData = () => {
            let params = {
                code: state.query.code,
                name: state.query.name,
                page: state.table.pagination.currentPage,
                pageSize: state.table.pagination.pageSize
            }
            http.fetchForm({
                url: '/sys/role/queryGrid',
                data: params
            }).then((res) => {
                state.table.data = res.data.grid
                state.table.pagination.total = res.data.total
            })
        }

        const reset = () => {
            state.query.code = ''
            state.query.name = ''
            loadData()
        }

        const doSub = () => {
            let selected = state.table.selected
            if (selected.length == 0) {
                ElNotification({
                    title: '提示',
                    message: '请选择',
                    type: 'info'
                })
                return
            }
            ctx.emit('select', selected)
        }

        // mounted
        onMounted(() => {
            loadData()
        })

        return {
            ...toRefs(state),
            datagrid,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            handleClickTableRow,
            loadData,
            reset,
            doSub
        }
    }
}
</script>
<style scoped>
@import '@/assets/css/list-cpt.css';
</style>
